<template>
  <h1>{{ sum }}</h1>
  <button @click="sum++">点击加1</button>
  <hr />
  <div>x坐标为{{ point.x }} y坐标为{{ point.y }}</div>
  <hr style=":color: green;">
  <button @click="dyh">喜欢</button>
</template>
  
<script>
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
//另一边可以不取名字，名字在这边取就好  只要能引用到那个文件就好了
import usePoint from '../hooks/usePoint'
import useDyhh from '../hooks/useDyh'
export default {
  name: "Demo",

  setup() { 
    let sum = ref(0);
   /*  let person = reactive({
      x: 0,
      y: 0,
    });

    function save(event)
    {
      person.x=event.pageX
        person.y=event.pageY
        console.log('gg');
    }
    //挂载的时候给window绑定一个点击事件
    onMounted(() => {
      window.addEventListener("click",save);
    });

    //因为如果隐藏了Demo 也就是卸载了 如果还持续的给windo绑定着一个点击事件 就不太好了 
    //在卸载之前 给window卸载掉它身上的点击事件
    onBeforeUnmount(()=>{
      window.removeEventListener('click',save)
    }) */

let point=usePoint()

let dyh=useDyhh()
 

    return {
      sum,
      point,dyh
    };
  },
};
</script>
  
  <style>
</style>
  